<template>
	<view>
		<!-- 选择收货地址区域 -->
		<view v-if="JSON.stringify(address) === '{}'" class="address-choose-box">
			<button
				@click="handleChooseAddress"
				type="primary" size="mini" class="address-choose-btn">请选择收货地址</button>
		</view>
		
		<!-- 渲染收货信息的区域 -->
		<view
			@click="handleChooseAddress"
			v-else class="address-info-box">
			<view class="row1">
				<view class="row1-left">
					<view class="username">收货人：{{ address.userName }}</view>
				</view>
				<view class="row1-right">
					<view class="phone">电话：{{ address.telNumber }}</view>
					<uni-icons type="right" size="18"></uni-icons>
				</view>
			</view>
			<view class="row2">
				<view class="row2-left">收货地址：</view>
				<view class="row2-right">{{ addstr }}</view>
			</view>
		</view>
		
		<!-- 底部的边框线 -->
		<image src="/static/cart_border@2x.png" class="address-border"></image>
	</view>
</template>

<script>
	import { mapGetters,mapMutations,mapState } from 'vuex'
	export default {
		methods: {
			...mapMutations('user',['updateAddress']),
			reAuth(){									// 处理用户重新授权获取地址的处理函数
				uni.showModal({
					content: '检查到您没有打开地址权限，是否去设置打开',
					cancelText: '取消',
					confirmText: '去设置',
					success(res){
						if(res.cancel){
							return uni.$showMsg('您取消了地址授权！')
						}
						if(res.confirm){
							uni.openSetting({
								success(res){
									if(!res.authSetting['scope.address']){
										return uni.$showMsg('您取消了授权！')
									}
									return uni.$showMsg('授权成功，请选择收货地址！')
								}
							})
						}
					}
				})
			},
			handleChooseAddress(){		// 处理选择收货地址的处理函数
				uni.chooseAddress({
					success: res => {
						// 组织数据对象
						const addressObj = {
							userName: res.userName,
							telNumber: res.telNumber,
							provinceName: res.provinceName,
							cityName: res.cityName,
							countyName: res.countyName,
							detailInfo: res.detailInfo
						}
						this.updateAddress(addressObj)
					},
					fail: err => {
						// 校验用户是否授权
						if(err.errMsg === 'chooseAddress:fail auth deny' || err.errMsg === 'chooseAddress:fail authorize no response'){
							console.log('需要重新授权')
							this.reAuth()
						}
					}
				})
			}
		},
		computed: {
			...mapGetters('user',['addstr']),
			...mapState('user',['address'])
		},
		data() {
			return {
			}
		},
		name:"my-address"
	}
</script>

<style lang="scss">
	/* 选择收货地址区域 */
.address-choose-box {
	height: 90px;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 渲染收货信息的区域 */
.address-info-box {
	font-size: 12px;
	height: 90px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 5px;
	
	.row1 {
		display: flex;
		justify-content: space-between;
		
		.row1-right {
			display: flex;
			justify-content: space-between;
		}
	}
	.row2 {
		display: flex;
		align-items: center;
		margin-top: 10px;
		
		.row2-left {
			white-space: nowrap;
		}
	}
}

/* 底部边框线区域 */
.address-border {
	width: 100%;
	height: 5px;
	vertical-align: middle;
}
</style>